<template>
  <view class="main">

    <scroll-view scroll-x class="bg-white nav" scroll-with-animation>
      <view class="cu-item" :class="index===tabIndex?'tab-active cur':''" v-for="(item,index) in tabs"
            :key="index" @tap="tabSelect($event,index)">
        {{ item }}
      </view>
    </scroll-view>

    <scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
      <view class="cu-item classify" :class="index===classifyIndex?'classify-active cur':''"
            v-for="(item,index) in classifyList"
            :key="index" @tap="classifyTabSelect($event,index)">
        {{ item.tabName }}
      </view>
    </scroll-view>


    <view class="project-list" v-if="tabIndex == 0">
      <view class="item" v-for="(item,i) in list" :key="i" @click="handleGoodsClick(item)">
        <image class="cover" :src="item.cover"></image>
        <text class="text-cut2 name">{{ item.goodsName }}</text>
        <view class="money">
          <text class="light">￥</text>
          <text class="light num">{{ item.price }}</text>
          <text class="line">￥{{ item.linePrice }}</text>
        </view>
        <view class="title">{{ item.comName }}</view>
        <starts :value="item.score" read-only/>
      </view>
    </view>

    <view class="shop-list" v-else>
      <view class="item" v-for="(item,i) in list" :key="i" @click="handleShopClick(item)">
        <image class="cover" :src="item.cover"></image>
        <view class="right">
          <view class="title">{{ item.comName }}</view>
          <view class="service">
            <text>评分：{{ item.score }}</text>
          </view>
          <view class="tags">
            <view class="tag">已销售{{ item.serviceCount }}</view>
          </view>
        </view>
      </view>

    </view>

    <list-loading v-if="loading"/>
    <list-empty v-if="!loading && (!list || list.length == 0)"/>
    <list-load-over v-else-if=" loadOver"/>
  </view>
</template>

<script>
import Starts from "@/components/stars";
import Api from "@/utils/Api";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";
import ListLoadOver from "@/components/list/loadOver";

export default {
  name: "classify",
  components: {ListLoadOver, ListLoading, ListEmpty, Starts},
  data() {
    return {
      tabs: ["项目", "店铺"],
      classifyList: [],
      tabIndex: 0,

      classifyIndex: 0,
      scrollLeft: 0,

      loading: false,
      loadOver: false,
      page: 0,
      list: [],
    }
  },
  computed: {
    currentClassify() {
      return this.classifyList[this.classifyIndex];
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    uni.setNavigationBarTitle({title: options.name})
    this.getItemTypes(() => {
      for (let i = 0; i < this.classifyList.length; i++) {
        let c = this.classifyList[i];
        if(c.id == options.id){
          this.classifyIndex = i;
          break;
        }
      }
      this.getList();
    });
  },
  methods: {
    handleShopClick(item) {
      uni.navigateTo({url: `/pages/shop/index/index?id=${item.id}`})
    },
    handleGoodsClick(item){
      uni.navigateTo({url: `/pages/shop/goods/detail?id=${item.id}`})
    },
    tabSelect(e, index) {
      this.tabIndex = index;
      this.clear();
      this.getList();
    },
    classifyTabSelect(e, index) {
      this.classifyIndex = index;
      this.scrollLeft = (index - 1) * this.core.rpx2px(108);

      this.clear();
      this.getList();
    },

    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },

    /**
     * 分类
     */
    getItemTypes(callback) {
      Api.getMainTabs().then(res => {
        this.classifyList = res
        typeof callback === 'function' && callback();
      })
    },
    getGoodsList(data) {
      Api.getGoods(data).then(res => {
        this.list.push(...res);
        if (res.length < 10) this.loadOver = true;
      }).finally(() => {
        this.loading = false;
        uni.stopPullDownRefresh()
      })
    },
    getShopList(data) {
      Api.getStoreList(data).then(res => {
        this.list.push(...res);
        if (res.length < 10) this.loadOver = true;
      }).finally(() => {
        this.loading = false;
        uni.stopPullDownRefresh()
      })
    },
    getList() {
      if (this.loadOver) return;

      this.loading = true;
      let data = {
        tabs_id: this.currentClassify ? this.currentClassify.id : null,
        page: ++this.page
      };
      if (this.tabIndex == 0) this.getGoodsList(data)
      else this.getShopList(data)
    },
  },
  onPullDownRefresh() {
    this.clear();
    this.getList();
  },
  onReachBottom() {
    this.getList();
  },
}
</script>

<style scoped lang='scss'>
.tab-active {
  color: #E1A373;
}

.main {
  overflow-x: hidden;
}

.classify {
  margin-top: r((90px - 36px) / 2);
  height: r(36px);
  line-height: r(36px);
  background: #EBEBEB;
  border-radius: r(18px);
  color: #333333;
  font-size: r(24px);

  &.cur {
    border: none;
  }

  &.classify-active {
    color: #E1A373;
  }
}

.project-list {
  $gap: r(15px);
  margin-top: r(20px);
  width: calc(100% + #{$gap});
  padding: r(0 15px);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-wrap: wrap;


  .item {
    width: calc(50% - #{$gap});
    margin-right: $gap;
    margin-top: $gap;

    .cover {
      height: r(350px);
      border-radius: r(12px);
    }

    .name {
      margin: r(25px 0);
      font-size: r(28px);
      color: #333333;
    }

    .money {
      font-size: r(20px);
      color: #909090;

      .light {
        color: #E83E3C;
      }

      .num {
        font-size: r(30px);
      }

      .line {
        margin-left: r(15px);
        text-decoration: line-through;
      }
    }

    .title {
      font-size: r(22px);
      font-weight: 500;
      color: #909090;
    }
  }
}

.shop-list {
  padding-bottom: env(safe-area-inset-bottom);
  margin-top: r(20px);

  .item {
    display: flex;
    padding: r(45px 28px);
    background-color: white;

    & + .item {
      margin-top: 1px;
    }

    .cover {
      height: r(125px);
      width: r(125px);
      border-radius: r(15px);
    }

    .right {
      margin-left: r(18px);
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title {
        font-size: r(30px);
        color: #333333;
      }

      .service {
        font-size: r(22px);
        color: #909090;
      }

      .tags {
        display: flex;

        .tag {
          font-size: r(20px);
          color: #666666;
          background: #F6F6F6;
          border-radius: r(4px);
          padding: r(2px 7px);
          margin-right: r(10px);
        }
      }
    }
  }
}
</style>